<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <title></title>
    <link rel="icon" href="../../img/logoimg.png" type="image/ico">
    <style>
        .cleanfloat::after{
            display: block; clear: both; content:""; visibility: hidden; height: 0;
        }
        ul li{
            list-style:none; float:left; font-size:30px; margin:5px; color:#ccc; cursor:pointer;
        }
        .hs,.cs{
            color:#f00;
        }
    </style>
    <script type="application/javascript" src="../../js/jquery-3.6.0.min.js"></script>
</head>
<h2 style="color: #2a6496">书籍评价</h2>
<div style="margin-left: 30%">
    <ul class="cleanfloat">
        <li>&#9733;</li>
        <li>&#9733;</li>
        <li>&#9733;</li>
        <li>&#9733;</li>
        <li>&#9733;</li>
        <li>&#9733;</li>
        <li>&#9733;</li>
        <li>&#9733;</li>
        <li>&#9733;</li>
        <li>&#9733;</li>
    </ul>
</div>
<form>
    <input type="hidden" name="cBookid" th:value="${b.blId}">
    <input type="hidden" id="score" name="cScore">
    <textarea placeholder="请输入评论内容" id="common" style="width: 600px;height: 200px;resize: vertical" name="cCommon"></textarea><br>
    <input type="button" onclick="addComment()" value="评论" style="background-color: whitesmoke; width: 100px;height: 40px;text-align: center;line-height: 20px;border: 1px #f99e01 solid;border-radius: 5px;"/>
</form>
<br><br><br>
<body>
<script>
    $(function () {
        $("ul li").hover(function(){
            $(this).addClass('hs');
            $(this).prevAll().addClass('hs');
        },function(){
            $(this).removeClass('hs');
            $(this).prevAll().removeClass('hs');
        })

        $("ul li").click(function () {
            $(this).addClass('cs');
            $(this).prevAll().addClass('cs');
            $(this).nextAll().removeClass('cs');
        })
    })

    //获取评分
    function addComment(){
        var score = $("li[class='cs']").length;
        var common = $("#common").val();

        //检验字段
        if(score==0){
            alert("请选择评分，至少一分！");
            return;
        }
        if(common==null || common == ""){
            alert("书评不能为空！");
            return;
        }

        $("#score").val(score);
        //检验通过，新增书评
        $.ajax({
            url:"/book/addComment",
            type:"post",
            data:$("form").serialize(),
            success:function (){
                location.reload();
            },error:function (){
                alert("新增书评失败");
            }
        })
    }
</script>
</body>
</html>